<template>
  <view class="test-content relative">
    <view class="title relative mx3 rounded-10 p3">
      <view class="test-header">
        {{ result.title }}
      </view>
    </view>
    <view class="mx3 m-t--40px border-5 border-#9498FA rounded-3 border-solid bg-white p3">
      <image :src="result.image" mode="widthFix" class="w-full" />

      <view class="">
        <view class="mxa w-200px p2 text-center">
          <u-button type="error" shape="circle" @click="saveImageToPhotosAlbum()">
            保存图片
          </u-button>
        </view>
        <view class="flex items-center justify-between p2">
          <u-button class="w-45%" shape="circle" @click="toTest()">再测一次</u-button>
          <u-button class="w-45%" type="error" shape="circle" open-type="share">分享</u-button>
        </view>
      </view>
    </view>

    <!--    <view> -->
    <!--      更多测试 -->
    <!--    </view> -->
  </view>
</template>

<script>
import { getResult } from '~/api/user_result'

export default {

  data() {
    return {
      // 数据
      id: 0,
      row: {},

    }
  },
  onReady() {
    // uni.setNavigationBarColor({
    //   frontColor: '#ffffff',
    //   backgroundColor: '#ff0000',
    //   animation: {
    //     duration: 400,
    //     timingFunc: 'easeIn',
    //   },
    // })
    uni.setNavigationBarTitle({
      title: '测试结果',
      frontColor: '#000000',
      backgroundColor: '#ffffff',
    })
  },
  onLoad(query) {
    this.id = query.id
    this.getResult(this.id)
  },
  computed: {
    result(){
      return this.row.data?.result || {}
    },
  },
  methods: {
    // 事件
    getResult(id) {
      getResult(id).then((res) => {
        this.row = res.data
      })
    },
    toTest() {
      uni.navigateTo({
        url: `/pages/test/index?id=${this.row.pid}`,
      })
    },
    saveImageToPhotosAlbum() {
      tt.downloadFile({
        url: this.result.image,
        header: {
          'content-type': 'application/json',
        },
        success: (res) => {
          const filePath = res.tempFilePath
          tt.saveImageToPhotosAlbum({
            filePath, // 暂不支持网络图片/本地图片地址，需与tt.downloadFile一起使用
            success: (res) => {
              tt.showToast({ title: '成功保存到本地相册' })
            },
            fail: (err) => {
              const errType = err.errMsg.includes(
                'saveImageToPhotosAlbum:fail cancel',
              )
                ? '取消保存'
                : '保存失败'
              tt.showModal({
                title: errType,
                content: err.errMsg,
                showCancel: false,
              })
            },
          })
        },
        fail: (err) => {
          tt.showModal({
            title: '下载出错',
            content: err.errMsg,
            showCancel: false,
          })
        },
      })
    },
    saveImage(){
      console.log('1111')
      uni.chooseImage({
        count: 1,
        sourceType: ['camera'],
        success(res) {
          console.log('choose', res)
          uni.saveImageToPhotosAlbum({
            filePath: res.tempFilePaths[0],
            success() {
              console.log('save success')
            },
          })
        },
      })
    },
  },
}
</script>

<style lang='scss'>
@import '@/uni_modules/dk-diy-page/components/dk-diy-box/animate.css';

.test-content {
  background: #3F4CBC;
  min-height: 100vh;
  .test-header{
    font-size: 16px;
    text-align: center;
    border-radius: 10px;
    background-image: url("@/static/default/test-result-header.png") ;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center;
    height: 140px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .test-button {
    position: absolute;
    bottom: 0;
    left: 10%;
    right: 10%;
    animation-delay: 0s;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}
</style>
